<!-- 新增/修改弹框 -->
<template>
	<!-- 新增/修改弹窗 -->
	<el-dialog
		v-model="visible"
		:width="screenWidth"
		:fullscreen="mobile === 'mobile'"
		:title="dialogAssignProject.title"
		draggable
		close-icon="CloseBold"
		@close="closeDialog"
	>
		<el-card shadow="never">
			<template #header>
				<div class="flex justify-between">
					<div>
						<el-button type="success" @click="addRow"
						>
							<i-ep-plus/>
							增加行
						</el-button
						>
					</div>
				</div>
			</template>
			<el-form
				ref="formRef"
				:model="formData"
				:rules="rules"
				label-width=""
				size=""
			>
				<el-table
					:data="formData.tableData" stripe :height="300"
					v-loading="loading"
					highlight-current-row
					border
				>
					<el-table-column
						label="序号"
						type="index" width="80" align="center"></el-table-column>
					<el-table-column
						key="projectId"
						label="项目名称"
						align="center"
						prop="projectId"
						width=""
					>
						<template #default="scope">
							<el-form-item label="" :prop="'tableData.' + scope.$index + '.projectId'" :rules="rules['projectId']">
								<el-select-v2 v-model="scope.row.projectId"
															clearable
															:options="projects" @change="change(scope.row)" placeholder="请选择项目">
								</el-select-v2>
							</el-form-item>
						</template>
					</el-table-column>
					<el-table-column label="操作" fixed="right" width="90">
						<template #default="scope">
							<el-button
								type="primary"
								link
								size="small"
								@click="handleDelete(scope.$index)"
							>
								<i-ep-delete/>
								删除
							</el-button
							>
						</template>
					</el-table-column>
				</el-table>
			</el-form>
		
		</el-card>
		
		<template #footer>
			<div class="dialog_footer">
				<el-button type="primary" :loading="loading" @click="handleSubmit">{{
						dialogAssignProject.footBtn
					}}
				</el-button>
				<el-button @click="closeDialog()">取 消</el-button>
			</div>
		</template>
	</el-dialog>
</template>

<script lang="ts" setup>
import {ref, reactive, computed} from "vue";
import {FlowDataInfoForm} from "@/api/system/process/types";
import {getConstructorAllProjectPulldown} from "@/api/common/project";
import {getProjectsByCommanderId, saveCommanderProject} from "@/api/constructor/project";

import {useScreen} from "@/store/modules/screen";

const screenStore = useScreen()
const mobile = computed(() => ( screenStore.device ));
const screenWidth = ref(900)

function initScreen(){
	if(mobile.value === 'mobile'){
		screenWidth.value = screenStore.screenWidth;
	}else {
		screenWidth.value = 900;
	}
}

const props = defineProps({
	dialogAssignProject: {
		type: Object,
		default: () => ({
			visible: false,
			title: "项目分配",
			footBtn: "保存",
			id: 0,
		}),
	},
});

const emit = defineEmits(["sendAssignProjectClose"]);

const loading = ref(false);
let visible = ref(props.dialogAssignProject.visible);
const formData = reactive({
	tableData: []
});
const formRef = ref(ElForm);
const projects = ref([])

const rules = reactive<FormRules<FlowDataInfoForm>>({
	projectId: [{required: true, message: "请选择项目", trigger: "blur"}],
});

onMounted(async () => {
	initScreen()
	
	loading.value = true;
	let tempFormData, tempProjects;
	tempProjects = await getConstructorAllProjectPulldown()
	tempProjects = tempProjects.data.list;
	Object.assign(projects.value, tempProjects);
	tempProjects = null;
	
	if (props.dialogAssignProject.id) {
		loading.value = true;
		tempFormData = await getProjectsByCommanderId(props.dialogAssignProject.id);
		tempFormData = tempFormData.data;
		Object.assign(formData.tableData, tempFormData);
		
		loading.value = false;
		tempFormData = null;
	}
	loading.value = false;
});

function change(row){
	let temp = projects.value.filter(item => item.value === row.projectId);
	if(temp && temp.length>0){
		row.projectName = temp[0].label;
	}
}

/* 发送当前弹窗关闭 */
function sendAssignProjectClose(query) {
	emit("sendAssignProjectClose",query);
}

/**
 * 增加行
 */
function addRow() {
	formData.tableData.push({})
}

/* 删除 */
function handleDelete(index){
	formData.tableData.splice(index,1);
}

function close() {
	visible.value = false;
	resetForm();
}

/**
 * 关闭弹窗
 */
function closeDialog(query) {
	visible.value = false;
	sendAssignProjectClose(query);
	resetForm();
}

/**
 * 重置表单
 */
function resetForm() {
	formRef.value.resetFields();
	formRef.value.clearValidate();
	
	formData.id = undefined;
}

/**
 * 表单提交
 */
function handleSubmit() {
	formRef.value.validate((valid: any) => {
		if (valid) {
			loading.value = true;
			saveCommanderProject(props.dialogAssignProject.id, formData.tableData)
				.then((resp) => {
					if (resp.success === true) {
						ElMessage.success(resp.msg);
						closeDialog(true);
					} else {
						ElMessage.warning(resp.msg);
					}
				})
				.finally(() => (loading.value = false));
		}
	});
}

</script>

<style lang="scss" scoped>
.d_left {
	margin-left: 60px;
}

:deep(.el-form-item) {
	flex-wrap: wrap;
}

.el-form-item {
	margin-bottom: 0;
}

.dialog_footer {
	// display: flex;
	// justify-content: center;
}

:deep(.el-input) {
	//width: 200px;
}
//
//:deep(.el-input__wrapper) {
//	width: 200px;
//}

:deep(.el-form-item__label) {
	color: #696868;
	font-size: 13px;
}
</style>
